<template>
    <div class="base-info"> 
        <div class="tags">
            <div 
            class="info-type"
            v-for="(item,ind) in navs" 
            :key="ind"
            v-czc="['查企业-详情-基本信息', '导航' , item.nodeName, 0 ,`checkEnterpriseInfo-btn-${item.nodeid}`]"
            >
                <el-button 
                plain
                :type="!btnDisabled(item.nodeId) ? '' : 'info'"
                :disabled="btnDisabled(item.nodeId)"
                @click="go(item.nodeId)" >
                    {{item.nodeName}}
                </el-button>
            </div>
        </div>
        
        <template v-if="isLogin">
            <div class="base-main">
                <div class="item" v-for="(item,ind) in navs" :key="ind" :id="item.nodeId">
                    <h3 v-show="componentShow(item.nodeId)">{{item.nodeName}}</h3>

                    <component 
                        ref="comRef" 
                        :is="componentName(item.nodeId)" 
                        v-show="isLogin && componentShow(item.nodeId)"
                        :nodeId="item.nodeId" 
                        :companyName="company"
                        @pushValidNames="pushValidNames"
                    ></component>
                </div>
            </div>
        </template>
        
        <shade 
            id="guide" 
            class="base-bot"
            type="business"
            :surplusNum="surplusNum"
            imgType="business1"
            :isHavingPower="isHavingPower" 
            :isLogin="isLogin" 
            @use="$emit('use')" 
            @afterBuy="$emit('afterBuy')" 
        ></shade>
    </div> 
</template>

<script>
import componentsNameById from '../mixins/components-name'

import tyQiyeInfo from '../search/tiany/qiyeinfo'
import basicBiangeng from '../search/basicinfo/biangengInfo'
import basicRenyuan from '../search/basicinfo/renyuan'
import basicGudong from '../search/basicinfo/gudong'
import basicFenzhi from '../search/basicinfo/fenzhi'
import basicZizhi from '../search/basicinfo/zizhi'
import basicPingji from '../search/basicinfo/pingji'
import shade from '../../../components/shade.vue'

export default {
    mixins: [ componentsNameById ],
    components: {
        tyQiyeInfo,
        basicBiangeng,
        basicRenyuan,
        basicGudong,
        basicFenzhi,
        basicZizhi,
        basicPingji,
        shade,
    },
    props: {
        isHavingPower: {
            type: Boolean,
            default: false
        },
        isLogin: {
            type: Boolean,
            default: false,
        },
        surplusNum: {
            type: Number,
            default: 0
        },
        company:{
            type: String,
            default: ''
        }
    },
    data() {
        return {
           radio:'0',
        //    company:'中启建设有限公司',//查询企业名称
           validIds:[],
           noNeedPowerList:['42','43'],//无需权限的id数组

           navs: [
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '42', 
                    'nodeName': '工商信息' ,
                    'nodeid':'businessInfo',
                }, 
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '43', 
                    'nodeName': '变更信息',
                    'nodeid': 'changeInfo'
                }, 
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '44', 
                    'nodeName': '主要人员',
                    'nodeid': 'keyPerson'
                }, 
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '45', 
                    'nodeName': '股东信息',
                    'nodeid': 'shareholderInfo'
                }, 
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '46', 
                    'nodeName': '分支机构',
                    'nodeid': 'branch'
                }, 
                {
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '47', 
                    'nodeName': '企业资质',
                    'nodeid': 'enterpriseQualification'
                }, 
                { 
                    'itemId': '12', 
                    'itemName': '基本信息', 
                    'nodeId': '50', 
                    'nodeName': '信用评级',
                    'nodeid': 'creditRating'
                }
            ],
        };
    },
    watch: {
        
    },
    methods: {
        componentName(id){
            return this.componentsNameById[id] 
        },
        go(id){
            let res = this.noNeedPowerList.includes(id);
            let myHref = this.isHavingPower || res ? `#${id}` : `#guide`;
            // window.location.href = myHref;
            document.getElementById(`${id}`).scrollIntoView({ block: 'center' });
        },
        pushValidNames(name){
            this.validIds = [...this.validIds,name]
        },
        isValid(id){
            let res = this.validIds.includes(id) ? true : false;
            return res;
        },
        btnDisabled(id){
            return this.isHavingPower ? !this.isValid(id) : false
        },
        componentShow(id){
            let res = this.noNeedPowerList.includes(id)
            if(this.isHavingPower || res){
                // 如果有权限或者属于免费范围
                return this.isValid(id)
            }else{
               return false
            }
        }
    },
    mounted () {
        
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
    .base-info {
        .tags {
            display: flex;
            margin-top: 15px;

            .info-type {
                margin-right: 10px;

                ::v-deep{
                    .el-button{
                        padding: 5px 8px;
                    }

                    .is-disabled{
                        color: #606266;
                    }
                }
            }
        }

        .base-main {
            .item {
                margin-top: 29px;
                h3 {
                    margin-bottom: 13px;
                }
            }
        }

        .base-bot{
            margin-top: 29px;
        }
        
    }
</style>